<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a routerLink="/pages/basicdata/customer">{{ 'basicdata.breadcrumb.customer' | translate }}</a>
      </d-breadcrumb-item>
      <d-breadcrumb-item>客户信息更新</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="card">
      <div class="card-title">
        <span>客户信息更新</span>
      </div>
      <form dForm [layout]="layoutDirection" [labelSize]="'sm'" [labelAlign]="'end'" class="mt-3"
        (dSubmit)="submit($event)">
        <section class="">
          <d-tabs [type]="'tabs'" [(activeTab)]="tabActiveId">
            <d-tab id="基本信息" title="基本信息">
              <div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>客户代号</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="客户代号" [(ngModel)]="customer.customerNum"
                        [dValidateRules]="customerRules.customerNum">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>客户简称</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="客户简称" [(ngModel)]="customer.customerAbbreviation"
                        [dValidateRules]="customerRules.customerAbbreviation">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>中文全名</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="中文全名" [(ngModel)]="customer.chineseName"
                        [dValidateRules]="customerRules.chineseName">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>英文全名</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="英文全名" [(ngModel)]="customer.englishName">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>账号</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="账号" [(ngModel)]="customer.account">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>密码</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="密码" [(ngModel)]="customer.password">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>客户类别</d-form-label>
                    <d-form-control>
                      <d-cascader [placeholder]="'客户类别'" [(ngModel)]="customerClassId" name="客户类别"
                        [options]="customerCategorys" [canSelectParent]="true" [allowSearch]="true" [allowClear]="true"
                        [dValidateRules]="customerRules.customerClassId" (ngModelChange)="customerClassChange($event)">
                      </d-cascader>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>客户类型</d-form-label>
                    <d-form-control>
                      <d-radio-group [name]="'客户类型'" [direction]="'row'" [(ngModel)]="customer.customerType">
                        <d-radio [name]="'customerType'" *ngFor="let obj of customerTypes" [value]="obj.value">
                          {{ obj.name }}
                        </d-radio>
                      </d-radio-group>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>内外销售</d-form-label>
                    <d-form-control>
                      <d-radio-group [name]="'内外销售'" [direction]="'row'" [(ngModel)]="customer.salesType">
                        <d-radio [name]="'salesType'" *ngFor="let obj of salesTypes" [value]="obj.value">{{ obj.name }}
                        </d-radio>
                      </d-radio-group>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>业务员</d-form-label>
                    <d-form-control>
                      <d-select [options]="staffNameoptions" [valueKey]="'id'" [filterKey]="'name'" name="业务员"
                        [(ngModel)]="customer.salesmanId" (valueChange)="staffNameoptionsChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>币种交易</d-form-label>
                    <d-form-control>
                      <d-select placeholder="请选择交易币种" [valueKey]="'currencyId'" [filterKey]="'currencyName'" name="币种交易"
                        [options]="currencyOptions" [(ngModel)]="customer.customerCurrencyId" (valueChange)="currencyOptionsChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>行政区划</d-form-label>
                    <d-form-control>
                      <div class="area">
                        <d-select [options]="[]" name="中国行政区划" [(ngModel)]="customer.country"></d-select>
                        <d-cascader [placeholder]="'请选择行政区划'" [showPath]="true" [dropdownPanelClass]="'custom-class'"
                          [allowClear]="true" [options]="city" name="行政区划" [(ngModel)]="address"
                          (ngModelChange)="cityChange()">
                        </d-cascader>
                      </div>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>详细地址</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="详细地址(xxx街道xxx路xxx号)" [(ngModel)]="customer.address">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>交货地址</d-form-label>
                    <d-form-control>
                      <div class="area">
                        <d-select [options]="[]" name="中国交货地址" [(ngModel)]="customer.country"></d-select>
                        <d-cascader [placeholder]="'交货地址'" [allowClear]="true" [showPath]="true"
                          [dropdownPanelClass]="'custom-class'" name="交货地址" [options]="city"
                          [(ngModel)]="deliveryAddress" (ngModelChange)="deliveryCityChange()">
                        </d-cascader>
                      </div>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>交货详细地址</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="交货详细地址(xxx街道xxx路xxx号)" [(ngModel)]="customer.deliveryAddress">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>发票地址</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="发票地址" [(ngModel)]="customer.invoiceAddress">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>电话</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="电话" [(ngModel)]="customer.phone">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>邮箱</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="邮箱" [(ngModel)]="customer.email">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>传真</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="传真" [(ngModel)]="customer.fax">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>联络对象</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="联络对象" [(ngModel)]="customer.contactPerson">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>是否开票</d-form-label>
                    <d-form-control>
                      <d-toggle [(ngModel)]="customer.isInvoicing" name="是否开票"></d-toggle>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>营业税率 (%)</d-form-label>
                    <d-form-control>
                      <d-input-number [(ngModel)]="taxRate" class="input-number" name="营业税率%" [min]="0" [max]="100"
                        (ngModelChange)="taxRateChange()"></d-input-number>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>收款账期</d-form-label>
                    <d-form-control>
                      <d-select placeholder="请选择" [options]="collectionPeriods" [(ngModel)]="customer.customerCollectionPeriodId" [valueKey]="'collectionPeriodId'" [filterKey]="'collectionPeriodName'"
                        name="收款账期" (valueChange)="CollectionPeriodChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>结算方式</d-form-label>
                    <d-form-control>
                      <d-select placeholder="请选择" [options]="settlementMethods" [(ngModel)]="customer.customerSettlementMethodId"
                        [valueKey]="'settlementMethodId'" [filterKey]="'settlementMethodName'" name="结算方式"  (valueChange)="settlementMethodsChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>折扣</d-form-label>
                    <d-form-control>
                      <d-select placeholder="请选择" [options]="DiscountOptions" [(ngModel)]="customer.customerDiscountId"
                        [valueKey]="'customerDiscountId'" [filterKey]="'customerDiscountName'" name="折扣"
                        (valueChange)="customerDiscountChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1">
                  <d-form-item>
                    <d-form-label>备注</d-form-label>
                    <d-form-control>
                      <textarea dTextarea name="备注" [(ngModel)]="customer.note"></textarea>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-1">
                  <d-form-item>
                    <d-form-label>
                      <span class="label">附件</span>
                    </d-form-label>
                    <d-form-control>
                      <d-button bsStyle="common" (btnClick)="onButtonClick()"><i
                          class="icon icon-upload me-2"></i><span>附件</span></d-button>
                    </d-form-control>
                  </d-form-item>
                </div>
              </div>
            </d-tab>
            <d-tab id="更多联系人" title="更多联系人">
              <div class="linkManbtn">
                <d-button (btnClick)="addLinkMan()">新增联系人</d-button>
              </div>
              <div class="linkMan">
                <d-data-table [dataSource]="tableData" [scrollable]="true" [tableWidthConfig]="tableWidthConfig">
                  <thead dTableHead>
                    <tr dTableRow>
                      <th dHeadCell>操作 </th>
                      <th dHeadCell>联系人</th>
                      <th dHeadCell>电话</th>
                      <th dHeadCell>传真</th>
                      <th dHeadCell>地址</th>
                      <th dHeadCell>电子邮箱</th>
                      <th dHeadCell>QQ</th>
                      <th dHeadCell>微信</th>
                      <th dHeadCell>是否默认</th>
                    </tr>
                  </thead>
                  <tbody dTableBody>
                    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                      <tr dTableRow>
                        <td dTableCell>
                          <span class="devui-link me-2" (click)="editLinkMan(rowItem,rowIndex)">编辑</span>
                          <span class="devui-link-danger" (click)="remove(rowIndex)">删除</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.customerContactName">{{rowItem.customerContactName}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.phone">{{rowItem.phone}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.fax">{{rowItem.fax}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.address">{{rowItem.address}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.email">{{rowItem.email}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.qq">{{rowItem.qq}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.weChat">{{rowItem.weChat}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem.isDefault | booleanToText:'是':'否'"><d-tag [tag]="rowItem.isDefault | booleanToText:'是':'否'" [labelStyle]="rowItem.isDefault"></d-tag></span>
                        </td>
                      </tr>
                    </ng-template>
                </d-data-table>
              </div>
            </d-tab>
            <d-tab id="开票信息" title="开票信息">
              <div class="linkManbtn">
                <d-button (btnClick)="addCustomerInvoice()">新增</d-button>
              </div>
              <div class="linkMan">
                <d-data-table [dataSource]="invoiceData" [scrollable]="true" [tableWidthConfig]="tableWidthConfig2">
                  <thead dTableHead>
                    <tr dTableRow>
                      <th dHeadCell>操作 </th>
                      <th dHeadCell>发票抬头</th>
                      <th dHeadCell>税号</th>
                      <th dHeadCell>地址</th>
                      <th dHeadCell>电话</th>
                      <th dHeadCell>开户银行</th>
                      <th dHeadCell>银行账户</th>
                      <th dHeadCell>是否默认</th>
                      <th dHeadCell>创建时间</th>
                    </tr>
                  </thead>
                  <tbody dTableBody>
                    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                      <tr dTableRow>
                        <td dTableCell>
                          <span class="devui-link me-2" (click)="editCustomerInvoice(rowItem,rowIndex)">编辑</span>
                          <span class="devui-link-danger" (click)="removeInvoice(rowIndex)">删除</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.invoiceHeader">{{rowItem.invoiceHeader}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.taxNumber">{{rowItem.taxNumber}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.address">{{rowItem.address}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.phone">{{rowItem.phone}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.depositBank">{{rowItem.depositBank}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.bankAccount">{{rowItem.bankAccount}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem.isDefault | booleanToText :'是':'否'">{{rowItem.isDefault | booleanToText :'是':'否'}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem.createTime | date:'yyyy-MM-dd'">{{rowItem.createTime | date:'yyyy-MM-dd'}}</span>
                        </td>

                      </tr>
                    </ng-template>
                </d-data-table>
              </div>
            </d-tab>
          </d-tabs>
        </section>
        <d-form-operation>
          <d-button bsStyle="primary" dFormSubmit>确定</d-button>
          <d-button class="ms-3" bsStyle="common" (click)=" cancle()">取消</d-button>
        </d-form-operation>
      </form>
    </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
